/**
 * Created by zzc on 2017/11/15.
 */
import React, {Component} from 'react';

import {
    View,
    StyleSheet,
    Image,
    Text,
    TouchableOpacity
} from 'react-native';

import {
    StackNavigator,
    TabNavigator
} from 'react-navigation';


export default class HomeHouseComponent extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={ {flexDirection:'column',backgroundColor:'#F7F8FA'}}>
                <View style={ {flexDirection:'row',backgroundColor:'white',height:95,padding:5}}>
                    <View style={ {flex:1,justifyContent:'center',alignItems:'center',flexDirection:'row'}}>
                        <Image style={styles.image} source={{uri: 'http://img.ishangzu.com/woju/2017/4/30/11/ed4b392e-910a-472e-9bb3-2dc43df1f50a.jpg'}} />
                        <Text style={ {fontSize:20,color:'white',textAlign:'center',position:'absolute'}  }>公司找房</Text>
                    </View>
                    <View style={ {flex:1,justifyContent:'center',alignItems:'center',flexDirection:'row',marginLeft:5}}>
                        <Image style={styles.image} source={{uri: 'http://img.ishangzu.com/woju/2017/4/30/11/4fe1d684-c1b8-465d-90f4-579fb9074fa8.jpg'}} />
                        <Text style={ {fontSize:20,color:'white',textAlign:'center',position:'absolute'}  }>通勤找房</Text>
                    </View>
                </View>

                <View style={ {flexDirection:'row',backgroundColor:'white',height:45,marginTop:5,alignItems:'center',paddingLeft:5,paddingRight:10}}>
                    <Text style={{color:'black',fontSize:13,justifyContent:'flex-start'}}> 当前所在：六合路368号南楼</Text>
                    <View style={{flex:1}}></View>
                    <Text style={{color:'red',fontSize:13,justifyContent:'flex-end'}}> 周边房源</Text>
                </View>

                <View style={ {flexDirection:'row',backgroundColor:'white',marginTop:5}}>
                    <View style={ {flex:1,flexDirection:'column',alignItems:'center'}}>
                        <Text style={ {fontSize:20,color:'black',textAlign:'center',marginTop:5}}>品牌公寓</Text>
                        <Text style={ {fontSize:13,color:'#888888',textAlign:'center',marginTop:5}}>有故事的青年公寓</Text>
                        <Image style={styles.image2} source={{uri: 'http://img.ishangzu.com/woju/2016/11/30/16/014ff75e-b467-4649-b1e9-77468203ea8d.jpg'}} />
                    </View>

                    <View style={ {flex:1,flexDirection:'column',alignItems:'center'}}>
                        <Text style={ {fontSize:20,color:'black',textAlign:'center',marginTop:5}}>整租公寓</Text>
                        <Text style={ {fontSize:13,color:'#888888',textAlign:'center',marginTop:5}}>自由空间，为你</Text>
                        <Image style={styles.image2} source={{uri: 'http://img.ishangzu.com/woju/2016/11/30/16/ad359495-a6a3-4789-8305-8fb566a666e3.jpg'}} />
                    </View>

                    <View style={ {flex:1,flexDirection:'column',alignItems:'center'}}>
                        <Text style={ {fontSize:20,color:'black',textAlign:'center',marginTop:5}}>合租公寓</Text>
                        <Text style={ {fontSize:13,color:'#888888',textAlign:'center',marginTop:5}}>青年合租，更有趣</Text>
                        <Image style={styles.image2} source={{uri: 'http://img.ishangzu.com/woju/2016/11/30/16/bad65825-4613-4d99-ab88-49f678c4a105.jpg'}} />
                    </View>

                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    image: {
        flex:1,
        height: 85,
        overflow:'hidden',
    },
    image2:{
        width: 85,
        height: 85,
        marginTop:5,
        marginBottom:10,
        justifyContent:'center',
        alignItems:'center'
    }
});
